<template>
  <page-card>
    <template #header>
      <material-filtrate-form
        type="video"
        @delete="deleteMaterial"
        @search="searchMaterialList"
        @open-upload-dialog="openUploadDialog"
      ></material-filtrate-form>
    </template>

    <template v-if="materialOptions.previewType === 1">
      <el-table
        ref="materialListTableRef"
        :data="materialList.list"
        :fit="true"
        :tooltip-effect="'light'"
        border
        class="table-select-all"
        height="100%"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          fixed="left"
          label="全选"
          type="selection"
          width="90"
        >
        </el-table-column>

        <el-table-column
          fixed="left"
          label="视频"
          width="360"
        >
          <template #default="scope">
            <el-row :gutter="10">
              <el-col :span="6">
                <el-popover
                  :show-after="300"
                  placement="right"
                  trigger="hover"
                  width="250px"
                >
                  <template #reference>
                    <video-item
                      :controls="false"
                      :show-play="false"
                      :src="scope.row.material_url"
                      height="42px"
                    ></video-item>
                  </template>

                  <section class="material-preview">
                    <video-item
                      :controls="false"
                      :src="scope.row.material_url"
                      height="120px"
                      icon-size="30px"
                    ></video-item>
                  </section>
                </el-popover>
              </el-col>
              <el-col :span="18">{{ scope.row.material_name || scope.row.material_id }}</el-col>
            </el-row>
          </template>
        </el-table-column>

        <el-table-column
          fixed="left"
          label="操作"
          min-width="100"
        >
          <template #default="scope">
            <el-button type="text"
                       @click="materialDetailDialogRef.toggleDialog(scope.row, scope.$index)">详情
            </el-button>
            <el-button type="text" @click="deleteMaterial([scope.row], scope.$index)">删除</el-button>
          </template>
        </el-table-column>

        <el-table-column
          v-for="item in materialOptions.materialIndicatorList"
          :key="item.id"
          :label="item.indicator_name"
          :prop="item.indicator_key"
          :show-overflow-tooltip="item.indicator_key === 'tag_list'"
          min-width="120"
        >
          <template #default="{row}">
            <template v-if="item.indicator_key === 'tag_list'">{{ row.tag_list2 }}</template>

            <template v-else-if="item.indicator_key === 'material_status'">
              <span v-if="row.material_status === 0">未拒审</span>
              <span
                v-if="row.material_status === 1"
                class="material-status-error"
                @click="showRejectedHandler(row)">被拒审</span>
            </template>

            <template v-else>{{ row[item.indicator_key] }}</template>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <el-scrollbar v-if="materialOptions.previewType === 2">
      <section class="asset-list">
        <el-checkbox-group v-model="materialCheckedList">
          <el-row :gutter="20">
            <el-col
              v-for="(item, index) in materialList.list"
              :key="item.material_id"
              :lg="4"
              :md="6"
              :sm="6"
              :xl="4"
              :xs="6"
            >
              <div class="asset-item">
                <div class="asset-cover">
                  <video-item
                    :controls="false"
                    :show-meta-data="true"
                    :src="item.material_url"
                    height="160px"
                    icon-size="30px"
                  ></video-item>

                  <div class="asset-checkbox">
                    <el-checkbox :key="item" :label="item">{{ '' }}</el-checkbox>
                  </div>
                </div>

                <div class="asset-name">{{ item.material_name }}</div>
                <el-row class="asset-props">
                  <el-col :span="12">
                    <SvgIcon name="uploadCloud"/>
                    {{ item.create_user_name }}
                  </el-col>
                  <el-col :span="12">
                    <SvgIcon name="clock"/>
                    <!--                    {{ item.create_time.split('T')[0] }}-->
                    {{ DayJs(item.create_time).format('YYYY-MM-DD') }}
                  </el-col>
                </el-row>

                <div class="asset-operate">
                  <div
                    v-if="item.material_status === 1"
                    class="asset-status"
                    @click="showRejectedHandler(item)">
                    <span>已拒审</span>
                  </div>
                  <div>
                    <div @click="materialDetailDialogRef.toggleDialog(item, index)">
                      <SvgIcon name="detail"/>
                      详情
                    </div>
                    <div @click="deleteMaterial([item], index)">
                      <SvgIcon name="delete"/>
                      删除
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-checkbox-group>
      </section>
    </el-scrollbar>

    <template #footer>
      <page-card-footer :border="false">
        <pagination :page-info="materialList.page_info" @handler="getMaterialList"></pagination>
      </page-card-footer>
    </template>
  </page-card>

  <UploadMaterialDialog ref="uploadMaterialDialogRef" type="video" @add="addMaterial"/>
  <MaterialDetailDialog ref="materialDetailDialogRef" type="video" @update="updateMaterial"/>
  <AddOrUpdDialog
    v-model:dialogVisible="showRejected"
    :closeModel="true"
    :showBtn="false"
    className="custom-dialog"
    title="审核未通过记录"
    width="858px"
  >
    <Rejected :sign="material_sign"/>
  </AddOrUpdDialog>
</template>

<script>
import {
  defineAsyncComponent,
  defineComponent,
  reactive,
  toRefs,
} from 'vue';
import materialHook from '../hooks';
import DayJs from 'dayjs'

const MaterialFiltrateForm = defineAsyncComponent(() => import('../components/MaterialFiltrateForm'));
const MaterialDetailDialog = defineAsyncComponent(() => import('../components/MaterialDetailDialog'));
const Rejected = defineAsyncComponent(() => import('../components/Rejected'));
const VideoItem = defineAsyncComponent(() => import('./VideoItem'));

export default defineComponent({
  name: 'Video',
  components: {
    MaterialFiltrateForm,
    MaterialDetailDialog,
    Rejected,
    VideoItem,
  },
  setup() {
    const state = reactive({
      type: 'video', // 素材类型（1.图片-image 2.视频-video 3.文案-copywriting） nbvcxSDFG
      materialListTableRef: null, // 素材表格
      materialDetailDialogRef: null, // 素材详情弹出框
      uploadMaterialDialogRef: null, // 上传素材弹出框
      // 显示拒审对话框
      showRejected: false,
      material_sign: '',
    });

    const materialState = materialHook(state);
    const showRejectedHandler = (row) => {
      state.material_sign = row.material_sign
      state.showRejected = true
    }
    return {
      ...toRefs(state),
      ...materialState,
      DayJs,
      showRejectedHandler,
    };
  },
});
</script>
<style lang="scss">
.custom-dialog .el-dialog__body {
  padding-bottom: 27px !important;
}
</style>
<style lang="scss" scoped>
.material-status-error {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 24px;
  background-color: rgba(245, 108, 108, 0.06);
  border: 1px solid #f56c6c;
  border-radius: 2px;
  text-align: center;
  cursor: pointer;
}

.asset-list {
  padding: 0 $page-spacing-x;

  .asset-item {
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid $border-color-base;
    border-radius: $border-radius-small;
    font-size: 12px;

    .asset-cover {
      position: relative;
      overflow: hidden;
      height: 160px;
      line-height: 1;

      .asset-checkbox {
        position: absolute;
        top: 10px;
        left: 10px;
      }

      .asset-duration {
        top: 10px;
        right: 10px;
      }

      .asset-size {
        right: 10px;
        bottom: 10px;
      }
    }

    .asset-name {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding: 10px;
    }

    .asset-props {
      display: flex;
      justify-content: space-between;
      padding: 0 10px 10px;

      > .el-col {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      > .el-col:last-child {
        text-align: right;
      }
    }

    .asset-operate {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      border-top: 1px solid $border-color-base;
      text-align: center;

      .asset-status {
        cursor: pointer;
        text-align: left;
      }

      > div {
        flex: 1;
      }

      > div:first-child {
        span {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 60px;
          height: 24px;
          background-color: rgba(245, 108, 108, 0.06);
          border: 1px solid #f56c6c;
          border-radius: 2px;
          text-align: center;
        }
      }

      > div:last-child {
        display: flex;
        justify-content: space-between;
        cursor: pointer;

        > div {
          flex: 1;

          &:hover {
            color: $color-primary;
          }
        }

        > div:last-child {
          position: relative;

          &:before {
            position: absolute;
            top: 50%;
            left: 0;
            display: block;
            margin-top: -6px;
            width: 1px;
            height: 12px;
            background-color: $border-color-base;
            content: "";
          }
        }
      }
    }
  }
}

.material-preview {
  width: 100%;

  video,
  img {
    display: block;
    width: 100%;
    height: auto;
  }
}
</style>
